<script lang="ts" setup>
import * as echarts from "echarts";
import pageVue from "/src/lib/lay/page.vue";
import control from "/src/lib/action/control.vue";
import { $ } from "../../../../lib/request";
import { ref } from "vue";
import { modal } from "vxe-table";

import { reactive, onMounted } from "vue";
import { IDCardNumber, CarId } from "/src/lib/encrypt/editRules.ts";

const date = "2021年11月15日";
const money = "0";

let Data = ref([] as Array<any>);
let echartsData = ref([] as Array<any>);

const gridOptions = reactive({
  border: true,
  resizable: false,
  height: 530,
  rowId: "id",
  checkboxConfig: {
    reserve: true,
  },
  pagerConfig: {
    pageSize: 10,
  },
  editConfig: { trigger: "click", mode: "row", enabled: true },
  editRules: {
    nickname: CarId,
    IDCardNumber: IDCardNumber,
  },
  columns: [
    {
      type: "checkbox",
      width: 50,
    },
    { field: "id", title: "订单号" },

    {
      field: "createTime",
      title: "时间",
      showOverflow: true,
    },
    {
      field: "carCard",
      title: "车牌 ",
      showOverflow: true,
    },
    {
      field: "productName",
      title: "物料名称",
      filters: [
           { value: "精品级配砂", label: "精品级配砂" },
          { value: "精品瓜子片", label: "精品瓜子片" },
          { value: "精品二分石", label: "精品二分石" },
          { value: "精品三分石", label: "精品三分石" },
          { value: "石粉", label: "石粉" },
          { value: "瓜子片", label: "瓜子片" },
          { value: "三分石", label: "三分石" },
          { value: "机制砂", label: "机制砂" },
          { value: "泥饼", label: "泥饼" },
          { value: "粉末", label: "粉末" },
      ],
      showOverflow: true,
    },
    ,
    {
      field: "tareWeight",
      title: "皮重",
      showOverflow: true,
    },

    {
      field: "netWeight",
      title: "净重",
      showOverflow: true,
    },
    {
      field: "grossWeight",
      title: "毛重",
      showOverflow: true,
    },
    {
      field: "unit",
      title: "所属单位",
      showOverflow: true,
    },

    {
      field: "productPrice",
      title: "单价",
      showOverflow: true,
    },

    {
      field: "amount",
      title: "金额",
      showOverflow: true,
    },
  ],
  proxyConfig: {
    seq: true, // 启用动态序号代理（分页之后索引自动计算为当前页的起始序号）
    props: {
      result: "result",
      total: "page.total",
    },
    ajax: {
      // 接收 Promise
      query: ({
        page: { currentPage, pageSize },
      }: {
        page: {
          currentPage: number;
          pageSize: number;
        };
      }) => {
        return new Promise((resolve) => {
          const list = [] as any[];

          $.get("oa/saas/product/cpxscx.do", { params: {} }).then(
            (tableData) => {
              tableData.data?.data?.productList?.forEach(
                ({
                  carCard,
                  amount,
                  grossWeight,
                  netWeight,
                  unit,
                  createTime,
                  id,
                  productName,
                  productPrice,
                  tareWeight,
                }: any) => {
                  list.push({
                    carCard,
                    amount,
                    grossWeight,
                    netWeight,
                    unit,
                    createTime,
                    id,
                    productName,
                    productPrice,
                    tareWeight,
                  });
                }
              );

              resolve({
                page: {
                  total: list.length,
                },
                result: list.slice(
                  (currentPage - 1) * pageSize,
                  currentPage * pageSize
                ),
              });
            }
          );
        });
      },
    },
  },
});
const option1 = {
  grid: {
    y2: 40,
    left: "10%",
    height: "60%",
  },
  tooltip: {
    trigger: "axis",
    formatter: function (params: any) {
      return params[0].name + ":" + params[0].value + "万";
    },
  },
  color: ["#6DD993"], // 横坐标
  xAxis: [
    {
      type: "category",
      data: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月",
      ],
      axisLabel: {
        fontSize: 16,
        interval: 0,
        margin: 12,
      },
      axisTick: {
        show: false,
      },
    },
  ],
  // 纵坐标
  yAxis: [
    {
      type: "value",

      min: 0,
      interval: 60,
      axisLabel: {
        show: true,
        interval: "auto",
        formatter: "{value} 万",
        color: "#CCCCCC",
        fontSize: 18,
      },
      nameTextStyle: {
        fontSize: 18,
        color: "#5D5D5D",
        padding: [0, 0, 8, 5],
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#DDDDDD",
          type: "solid",
          width: 1,
        },
      },
    },
  ],
  series: [
    {
      data: [],
      type: "bar",
    },
  ],
};
const option2 = {
  grid: {
    y2: 40,
    x2: 20,
    left: "11%",
    height: "60%",
  },
  tooltip: {
    trigger: "axis",
  },
  color: ["#6DD993"], // 横坐标
  xAxis: [
    {
      type: "category",
      data: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月",
      ],
      axisLabel: {
        fontSize: 16,
        interval: 0,
        margin: 12,
      },
      axisTick: {
        show: false,
      },
    },
  ],
  // 纵坐标
  yAxis: [
    {
      type: "value",

      min: 0,
      interval: 3000,
      axisLabel: {
        show: true,
        interval: "auto",
        formatter: "{value} 吨",
        color: "#CCCCCC",
        fontSize: 18,
      },
      nameTextStyle: {
        fontSize: 18,
        color: "#5D5D5D",
        padding: [0, 0, 8, 5],
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#DDDDDD",
          type: "solid",
          width: 1,
        },
      },
    },
  ],
  series: [
    {
      data: [1, 2, 3],
      type: "bar",
    },
  ],
};

onMounted(() => {
  getEchartsData();
});

const getEchartsData = () => {
  $.get("oa/saas/product/xsetj.do", { params: {} }).then((Data) => {
    //  console.log(Data.data.data);

    option1.series[0].data = Data.data.data.map((item: any) => {
      return (item /= 10000);
    });
    loaderCircle2();
  });

  $.get("oa/saas/product/xsltj.do", { params: {} }).then((Data) => {
    //  console.log(Data.data.data);

    option2.series[0].data = Data.data.data;
    loaderCircle3();
  });
};
const loaderCircle2 = () => {
  const chartDom: HTMLElement = document.getElementById("main") as HTMLElement;
  chartDom.setAttribute("_echarts_instance_", "");
  var myChart = echarts.init(chartDom);
  myChart.setOption(option1);
};
const loaderCircle3 = () => {
  const chartDom: HTMLElement = document.getElementById("main2") as HTMLElement;
  chartDom.setAttribute("_echarts_instance_", "");
  var myChart = echarts.init(chartDom);
  myChart.setOption(option2);
};
const xTable = ref({} as any);
const xToolbar = ref({} as any);
// 打印样式
const printStyle = `
  .title {
    text-align: center;
  }
  .my-list-row {
    display: inline-block;
    width: 100%;
  }
  .my-list-col {
    float: left;
    width: 33.33%;
    height: 28px;
    line-height: 28px;
  }
  .my-top,
  .my-bottom {
    font-size: 12px;
  }
  .my-top {
    margin-bottom: 5px;
  }
  .my-bottom {
    margin-top: 30px;
    text-align: right;
  }
  `;
// 打印顶部内容模板
const topHtml = `
  <h1 class="title">销售统计表</h1>
  </div>
  `;
// 打印底部内容模板
const bottomHtml = `
  <div class="my-bottom">
    <div class="my-list-row">
      <div class="my-list-col"></div>
    </div>
  </div>
  `;
const printEvent1 = () => {
  const $table = xTable.value;
  $table.print({
    sheetName: "东阳世展新型建材有限公司产品销售统计表",
    style: printStyle,
    columns: [
      // { type: 'seq' },
      { field: "id" },
      { field: "createTime" },
      { field: "carCard" },
      {
        field: "productName",
      },
      {
        field: "tareWeight",
      },
      {
        field: "netWeight",
      },
      {
        field: "grossWeight",
      },
      {
        field: "unit",
      },
      {
        field: "productPrice",
      },
      {
        field: "amount",
      },
    ],
    beforePrintMethod: ({ content }: any) => {
      // 拦截打印之前，返回自定义的 html 内容
      return topHtml + content + bottomHtml;
    },
  });
};
const exportExcel = () => {
  const $table = xTable.value;
  $table.exportData({ type: "csv" });
};
</script>
<template lang="pug">
pageVue
  template(v-slot:top)
    .hjk
      .topp 东阳世展新型建材有限公司产品销售统计表
        vxe-grid(v-bind="gridOptions" ref="xTable" highlight-hover-row style="margin-top: 20px")
      .bot
        vxe-toolbar(ref="xToolbar" )
          template(#buttons)
            vxe-button.bott(content="打印表格" @click="printEvent1" style="margin-right: 13px")
            vxe-button.bott(content="导出" @click="exportExcel" )
  template(v-slot:bottom)
    .hjk2
      .leftt
        #main
        .title 销售额统计表
      .rightt
        #main2
        .title 销售量统计表
</template>
<style lang="scss" scoped>
.hjk {
  position: relative;
  display: grid;
  gap: 20px;
  padding: 48px;
}
.topp {
  font-size: 20px;
  font-weight: bold;
  line-height: 20px;
  color: #5d5d5d;
}

.mid {
  font-size: 18px;
  color: #5d5d5d;
  font-weight: bold;
}
.bot {
  bottom: 46px;
  left: 54px;
  position: absolute;
  text-align: center;
  margin-bottom: -20px;
  .bott {
    text-align: center;
    text-decoration: none;
    display: inline-block;
    min-width: 87px;
    height: 34px;
    background: #f0faf2;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);
    border-radius: 10px;
    font-size: 18px;
    line-height: 34px;
    color: #5d5d5d;
    border: none;
    padding: 0 8px;
    cursor: pointer;
  }
}
.hjk2 {
  font-size: 18px;
  font-weight: bold;
  color: #5d5d5d;
  display: flex;
  .leftt {
    width: 50%;
    position: relative;
    #main {
      width: 100%;
      height: 340px;
    }
    .title {
      position: absolute;
      top: 20px;
      left: 39%;
    }
  }
  .rightt {
    width: 50%;
    #main2 {
      width: 100%;
      height: 340px;
    }
    .title {
      position: absolute;
      top: 20px;
      right: 23%;
    }
  }
}
</style>
